<template>
  <f7-page class="transparent-navbar-page">
    <f7-navbar class="tranparent-navbar no-hairline" :title="typeValue === '1' ? '币种转账' : '币种转换'" back-link="返回">
      <f7-nav-right>
        <f7-link popover-open=".type-popover">选择类型</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="top-total">
      <p>{{typeValue === '1' ? active === 0? '建设金余额': '激活币余额' : '收益积分'}}</p>
      <h3>{{getTotal}} <img src="../assets/cc_002.png" alt=""></h3>
    </div>
    <div class="div-inner">
      <!--币种转账-->
      <div v-if="typeValue === '1'">
        <van-tabs v-model="active" :border="false">
          <van-tab title="建设金转账"></van-tab>
          <van-tab title="激活币转账"></van-tab>
        </van-tabs>

        <div class="form-box">
          <custom-input label="收款账号" placeholder="请输入收款账号" v-model="formItems.username"></custom-input>
          <custom-input type="number" label="金额" placeholder="请输入转账金额" v-model="formItems.num"></custom-input>
          <custom-input type="password" label="交易密码" placeholder="请输入交易密码" v-model="formItems.pwd"></custom-input>
        </div>
        <div class="content-padding">
          <f7-button fill round @click="handleTransfer">确定</f7-button>
          <p><f7-link href="/transfer-record/?type=1">转换记录</f7-link></p>
        </div>
      </div>
      <!--币种转换-->
      <div v-else>
        <van-tabs v-model="active2" :border="false">
          <van-tab title="转换为建设金"></van-tab>
          <van-tab title="转换为激活币"></van-tab>
        </van-tabs>

        <div class="form-box">
          <custom-input type="number" label="数量" placeholder="请输入数量" v-model="formItems2.num"></custom-input>
          <custom-input type="password" label="交易密码" placeholder="请输入交易密码" v-model="formItems2.pwd"></custom-input>
        </div>
        <div class="content-padding">
          <f7-button fill round @click="handleExchange">确定</f7-button>
          <p><f7-link href="/transfer-record/?type=2">转账记录</f7-link></p>
        </div>
      </div>
    </div>

    <f7-popover class="popover-menu type-popover" ref="abc">
      <f7-list>
        <f7-list-item radio title="币种转账" name="demo-radio" checked
                      value="1"
                      @change="toggleType($event.target.value)"
        ></f7-list-item>
        <f7-list-item radio title="币种转换" name="demo-radio"
                      value="2"
                      @change="toggleType($event.target.value)"
        ></f7-list-item>
      </f7-list>
    </f7-popover>
  </f7-page>
</template>

<script>
  import { paidanZhuan, interturn } from "../api/home";

  export default {
    name: "mutual-transfer",
    data() {
      return {
        active: 0,
        active2: 0,
        typeValue: '1',
        formItems: {
          username: '',
          num: '',
          pwd: '',
          type: ''
        },
        formItems2: {
          num: '',
          pwd: '',
          type: ''
        }
      }
    },
    computed: {
      getTotal() {
        if (this.typeValue === '1') {
          if(this.active === 0) {
            return this.$store.getters.userInfo.money.paidan_f
          } else {
             return this.$store.getters.userInfo.money.jihuo_f
          }
        } else return this.$store.getters.userInfo.money.shouyi_f
      }
    },
    methods: {
      toggleType(type) {
        this.typeValue = type;
        this.$refs.abc.close();
      },
      handleTransfer() {
        this.formItems.type = this.active;
        this.formItems.type++;
        paidanZhuan(this.formItems).then(() => {
          this.$store.dispatch('GetInfo');
        })
      },
      handleExchange() {
        this.formItems2.type = this.active2;
        this.formItems2.type++;
        interturn(this.formItems2).then(() => {
          this.$store.dispatch('GetInfo');
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .transparent-navbar-page {
    background: $mainBg url("../assets/xhzz_006.png") no-repeat center -44PX;
    background-size: 100% auto;
  }
  .tranparent-navbar {
    /deep/ .navbar-bg {
      background: transparent!important;
    }
  }
  .top-total {
    height: 158px;
    /*background: url("../assets/xhzz_006.png") no-repeat center -44PX;
    background-size: 100% 100%;*/
    text-align: center;
    padding-top: 40px;
    color: $fontColor;
    p {
      font-size: 22px;
    }
    h3 {
      font-size: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: -2px;
      img {
        width: 25px;
        margin-left: 10px;
      }
    }
  }
  .div-inner {
    overflow: auto;
    height: calc(100% - 44PX - 180px);
    .form-box {
      padding: 50px 70px;
      .custom-input {
        margin-bottom: 30px;
      }
    }
    .content-padding {
      p {
        text-align: right;
        padding: 20px 0;
        font-size: 22px;
      }
    }
  }
  .popover-menu {
    background:linear-gradient(57deg,rgba(72,166,199,1),rgba(87,225,255,1));
    /deep/ {
      .item-inner {
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }

  }

</style>